<template>
	<view class="content">
		<image class="top-image" src="../../../static/Bargaining/Bargaining-top.png" mode=""></image>
		<view class="rule-index" @click="$refs.barRulePopup.open()">
			<text>规则</text>
		</view>
		<view class="bargining-list">
			<block v-for="(item, index) in 3" :key="index">
				<view class="bargining-item">
					<image class="image-left" src="" mode=""></image>
					<view class="item-right">
						<text class="item-title">王者荣耀皮肤 白晶晶芈月</text>
						<view class="item-center">
							<view class="item-ready">
								<view class="item-ready-line" style="width: 70%;"></view>
							</view>
							<text class="item-ready-text">已砍40%</text>
						</view>
						<view class="item-bottom">
							<text class="item-number-user">532人已免费拿</text>
							<view class="bargining-btn" @click="goToBarInfo(2)">
								<text>继续砍价</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-popup ref="barRulePopup" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.barRulePopup.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text">砍价规则</text>
					<text class="top-text1">请认真阅读，如有疑问请联系客服~</text>
					<view class="center-bottom" style="margin-top: 143rpx;">
						<rich-text class="rich-text" :nodes="bar_nodes"></rich-text>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="barFriendSuccessPopup" type="center" :maskClick="false">
			<view class="bar-public-popup">
				<image class="bg-image" src="../../../static/luttery-start-bgimg.png" mode="widthFix"></image>
				<image class="close-popup" @click="$refs.barFriendSuccessPopup.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<view class="popup-center">
					<text class="top-text">帮砍成功！</text>
					<text class="top-text1">您有小伙伴帮您砍价喽~</text>
					<view class="center-bottom" style="margin-top: 120rpx;">
						<image class="sucessFriend-image" src="../../../static/Bargaining/friend-success.png" mode=""></image>
						<text class="successFriend-text">太给力了！小姐姐帮您砍掉<text class="money-success">￥15.89</text></text>
						<view class="close-btn" @click="$refs.barFriendSuccessPopup.close()">
							<text>继续邀请好友帮忙砍</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bar_nodes:`<p>1 .砍价免费拿活动不需要支付任何费用，邀请好
								友帮忙砍价成功即可免费拿走。
								2 .在规定时间内邀请好友砍价到0元即为成功，
								请务必填写兑换奖品领取消息，否则不予发放。
								3 .所有奖品7个工作日内发放完毕，如有疑问请
								联系客服。
								4 .通过作弊、反编译等不正常砍价行为获得奖品，
								平台不予发放。</p>`
			};
		},
		onShow() {
			// this.$refs.barFriendSuccessPopup.open()
		},
		methods:{
			goToBarInfo(id){
				uni.navigateTo({
					url:'bargainingInfo?id='+id
				})
			},
		}
	}
</script>

<style lang="scss">
	.popup-center{
		display: flex;
		align-items: center;
		flex-direction: column;
		z-index: 1;
		width: 690upx;
		border-radius: 0 0 18upx 18upx;
		.top-text{
			font-size: 36upx;
			font-weight: bold;
			color: #E9564F;
			margin-bottom: 30upx;
		}
		.top-text1{
			font-size: 30upx;
			color: #7c7c7c;
		}
		.center-bottom{
			display: flex;
			width: 100%;
			align-items: center;
			flex-direction: column;
			background-color: #FFFFFF;
			padding: 0 30upx 52upx 30upx;
			border-radius: 0 0 18upx 18upx;
			.close-btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 410upx;
				height: 80upx;
				border-radius: 20upx;
				background: linear-gradient(-4deg, rgba(251, 98, 102, 0.99), rgba(255, 128, 132, 0.99));
				color: #FFFFFF;
				font-size: 34upx;
			}
			.successFriend-text{
				font-size: 30upx;
				color: #111111;
				display: flex;
				align-items: center;
				margin-bottom: 39upx;
				.money-success{
					color: #E9564F;
				}
			}
			.sucessFriend-image{
				width: 234upx;
				height: 219upx;
				margin-bottom: 28upx;
			}
			.rich-text{
				width: 600upx;
				color: #111111;
				line-height: 48upx;
				font-size: 28upx;
			}
		}
	}
	.bar-public-popup{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 690upx;
		box-sizing: border-box;
		padding-top: 38upx;
		position: relative;
		.bg-image{
			position: absolute;
			z-index: 0;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
		.close-popup{
			position: absolute;
			top: 24upx;
			right: 24upx;
			width: 31upx;
			height: 31upx;
			z-index: 10;
		}
	}
	.rule-index{
		width: 103upx;
		height: 48upx;
		background: rgba(0,0,0,0.5);
		border-radius: 24upx 0 0 24upx;
		color: #FFFFFF;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 50upx;
		right: 0;
	}
	.bargining-item{
		display: flex;
		align-items: center;
		width: 690upx;
		padding: 30upx;
		border-radius: 20upx;
		background: #FFFFFF;
		box-sizing: border-box;
		margin-bottom: 30upx;
		.item-right{
			display: flex;
			flex-direction: column;
			.item-title{
				font-size: 30upx;
				color: #111111;
				margin-bottom: 29upx;
			}
			.item-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-number-user{
					font-size: 28upx;
					color: #AEAEAE;
				}
				.bargining-btn{
					box-sizing: border-box;
					padding: 10upx 16upx;
					border-radius: 24upx;
					background: #FBDDDC;
					font-size: 30upx;
					color: #E9564F;
					font-weight: 400;
				}
			}
			.item-center{
				display: flex;
				align-items: center;
				margin-bottom: 30upx;
				.item-ready{
					display: flex;
					align-items: center;
					width: 253upx;
					height: 10upx;
					background: #FBDDDC;
					border-radius: 5upx;
					.item-ready-line{
						height: 10upx;
						border-radius: 5upx;
						background: #E9564F;
					}
				}
				.item-ready-text{
					font-size: 28upx;
					color: #E9564F;
					margin-left: 35upx;
				}
			}
		}
		.image-left{
			width: 200upx;
			height: 192upx;
			border-radius: 10upx;
			margin-right: 30upx;
			background: #EBEBEB;
		}
	}
	.bargining-list{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 750upx;
		box-sizing: border-box;
		padding: 30upx;
	}
	.top-image{
		width: 750upx;
		height: 300upx;
	}
	.content{
		display: flex;
		width: 750upx;
		min-height: 100vh;
		flex-direction: column;
		align-items: center;
		background: #F7F7F7;
	}
</style>
